
const app = getApp();
let pageNo = 1;
let pageSize = 10;
Page({
  data: {
    fenLei: [
        { title: "待开始", count: 2 },
        { title: "进行中", count: 7 },
        { title: "已完成", count: 0 }
    ],
    currentIndex:0,
    listData:[
      {color:"#2F21BC",color2:"#ffffff",title:"风系魔法：声音之力",title_e:"Wind Magic: Power of Sound",like:"108",liked: false,nums:"48",status:"0",dataValues: ['20', '10'],},
      {color:"#ffffff",color2:"#2F21BC",title:"塔罗入门：速通版",title_e:"Tarot for Beginners: Quick Pass",like:"58",liked: false,nums:"46",status:"3",dataValues: ['40', '20'],},
    ],
    listData2:[],
    canvasWidth: 140, // 画布宽度
    progressWidths: [], // 进度条宽度数组

    touchStartX: 0,
    touchEndX: 0,

    page: pageNo, //页数,
    loadmore: 'loadmorenone',//是否显示加载页,
    sessionid:'',
    navTop: app.globalData.navTop
  }, 
  attached: function () {
    // 定义导航栏的高度   方便对齐
    this.setData({
      navHeight: app.globalData.navHeight,
      navTop: app.globalData.navTop
    })
  },
  //分类切换
  toChange: function(e) {
    const index = e.currentTarget.dataset.index;
    this.setData({
      currentIndex: index
    });
  },
  //完结奖励数值
  drawProgress: function() {
    const listData = this.data.listData;
    const canvasWidth = this.data.canvasWidth;
    const progressWidths = listData.map(item => {
      return item.dataValues.map(value => {
        return canvasWidth * value / 100;
      });
    });
    this.setData({
      progressWidths: progressWidths
    });
  },
  //点赞
  liked: function(event) {
    const index = event.currentTarget.dataset.index;
    const newListData = this.data.listData.map((item, idx) => {
        if (idx === index) {
            item.liked = !item.liked; // 切换点赞状态
            if (item.liked) {
                item.like++; // 点赞数加1
            } else {
                item.like--; // 取消点赞，点赞数减1
            }
        }
        return item;
    });
    this.setData({
        listData: newListData
    });
  },
  // 返回上一级
  back: function() {
    wx.navigateBack({
        delta: 1 // 返回上一级页面
    });
  },
  touchStart: function(e) {
    this.touchStartX = e.changedTouches[0].clientX;
    this.touchEndX = this.touchStartX;
    // 隐藏所有按钮
    this.data.listData.forEach((item) => {
      item.showBtn = false;
    });
    this.setData({
      listData: this.data.listData
    });
  },

  touchEnd: function(e) {
    this.touchEndX = e.changedTouches[0].clientX;
    const index = e.currentTarget.dataset.index;
    const deltaX = this.touchEndX - this.touchStartX;
    
    // 根据滑动方向显示或隐藏按钮
    if (deltaX < 0) {
      this.data.listData[index].showBtn = true; // 向左滑动，显示按钮
    } else {
      this.data.listData[index].showBtn = false; // 向右滑动，隐藏按钮
    }
    
    this.setData({
      listData: this.data.listData
    });
  },
  // 置顶列表
  totop: function(e) {
    const index = e.currentTarget.dataset.index;
    const item = this.data.listData[index];
    this.data.listData.splice(index, 1); // 从原位置删除该项
    this.data.listData.unshift(item); // 将该项置顶
    // 点击置顶后恢复为不滑动状态
    this.data.listData.forEach((item) => {
        item.showBtn = false;
    });
    this.setData({
      listData: this.data.listData
    });
  },
  // 删除列表
  delete: function(e) {
    const index = e.currentTarget.dataset.index;
    this.data.listData.splice(index, 1); 
    this.setData({
      listData: this.data.listData
    });
  },
  onLoad: function (options) {
   
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.drawProgress(); //完结奖励数值
  },
  
  /**
   * 生命周期函数--监听页面显示
   */
  onShow:function(){
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
})